import React from 'react';
import { connect } from 'dva';
import { Button, Table, Form, Input, Popconfirm, DatePicker, Select, TreeSelect, Menu,Dropdown, Icon, } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;
const RangePicker = DatePicker.RangePicker;

import RepairViewModal from '../../components/repair/RepairViewModal';
import AddRepairModal from '../../components/repair/AddRepairModal';
import SecondRepairModal from '../../components/repair/SecondRepairModal';
import AddDetailModal from '../../components/repair/AddDetailModal';
import DoRepairViewModal from '../../components/repair/DoRepairViewModal'
import RepairRemarkViewModal from '../../components/repair/RepairRemarkViewModal';
function Repair({ dispatch, repair, loading, form }) {

    const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
    const { detailList, currentItem, modalVisible, assetList, modalType, } = repair


    const columns = [{
        title: '申请单号',
        dataIndex: 'id_',
        key: 'id_',
        width: 120,
    }, {
        title: '所在机房',
        dataIndex: 'roomName',
        key: 'roomName',
        width: 100,
    }, {
        title: '预计执行时间',
        dataIndex: 'executeTime',
        key: 'executeTime',
        width: 100,
    }, {
        title: '指定操作人',
        dataIndex: 'operatiorName',
        key: 'operatiorName',
        width: 80,
    }, {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 60,
        render: (value, row, index) => {
            return (
                value == 1 ? "未完成" : value == 2 ? "处理中" : value == 3 ? "已完成" : ''
            )
        }
    },{
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 120,
    }, {
        title: '操作',
        key: 'operation',
        width: 60,
        render: (text, record) => (
            <span>
                {(record.status == 1) ? (
                    <span>
                     <Dropdown overlay={
                        <Menu>
                            <Menu.Item>
                            <a onClick={doRepair.bind(null, record.id_)}>确认维修</a>
                            </Menu.Item>
                            <Menu.Item>
                                <Popconfirm title="确认删除？" onConfirm={deleteHandler.bind(null, record.id_)}>
                                <a>删除</a>
                                </Popconfirm>
                            </Menu.Item>         
                        </Menu>
                        }>
                        <a className="ant-dropdown-link">
                            操作<Icon type="down" />
                        </a>
                        </Dropdown>
                        <span className="ant-divider" />
                        <a onClick={onViewItem.bind(null, record.id_)}>查看</a>
                    </span>
                ) :
                    <span>
                        <a onClick={onViewItem.bind(null, record.id_)}>查看</a>
                    </span>
                }
            </span>
        ),
    }];

    const pagination = {
        current: repair.current,
        pageSize: repair.currentSize,
        total: repair.total,
        showSizeChanger: true,
        showTotal: (total => '共' + repair.total + '条'),
        onShowSizeChange(current, size) {
            dispatch({
                type: 'repair/queryList',
                payload: { ...getFieldsValue(), ...{ 'pageNum': current, 'pageSize': size } },
            });
        },
        onChange(current) {
            dispatch({
                type: 'repair/queryList',
                payload: { ...getFieldsValue(), ...{ 'pageNum': current, 'pageSize': repair.currentSize } },
            });
        },
    };

    const doRepair = (id) => {
        dispatch({
            type: 'repair/onDoRepairViewItem',
            payload: id,
        })
    }

    const onViewItem = (id) => {
        dispatch({
            type: 'repair/onViewItem',
            payload: id,
        })
    }
    const submitHandle = () => {
        dispatch({
            type: 'repair/queryList',
            payload: { ...getFieldsValue() },
        });
    }

    function handleClear() {
        form.resetFields();
    }

    function deleteHandler(id) {
        dispatch({
            type: 'repair/remove',
            payload: { id: id, search: { ...getFieldsValue() } },
        });
    }
    const addHandler = () => {
        dispatch({
            type: 'repair/qryById',
            payload: {
                modalType: 'create',
            },
        })
    }
    const onAddDetail = () => {
        dispatch({
            type: 'repair/showSecondModal',
        })
    }


    const viewModalProps = {
        item: repair.viewItem,
        visible: repair.viewModalVisible,
        maskClosable: false,
        viewDetailList: repair.viewDetailList,
        confirmLoading: loading,
        title: '查看维修单',
        wrapClassName: 'vertical-center-modal',
        newKey: repair.newKey,
        onCancel() {
            dispatch({
                type: 'repair/hideViewModal',
            })
        },
    }
    const addDetailModal = {
        item: repair.assetItem,
        visible: repair.addDetailModalVisible,
        assetList: assetList,
        assetType: repair.assetTypeTree,
        detailList: repair.detailList,
        roomList: repair.roomList,
        assetBrandList: repair.assetBrandList,
        maskClosable: false,
        dispatch: dispatch,
        confirmLoading: loading,
        title: '新增维修详情',
        wrapClassName: 'vertical-center-modal',
        onCancel() {
            dispatch({
                type: 'repair/hideAddDetailModal',
            })
        },

        addRepairDetailHandle(data) {
            for (var i = 0; i < detailList.length; i++) {
                if (data.assetId == detailList[i].assetId_) {
                    detailList[i].faultRemark = data.remark;
                }
            }
            dispatch({
                type: 'repair/hideAddDetailModal',
                payload: detailList,
            });
        }
    }
    const repairModalProps = {
        item: repair.qryAssetItem,
        visible: repair.secondModalVisible,
        assetList: assetList,
        assetType: repair.assetTypeTree,
        detailList: repair.detailList,
        roomList: repair.roomList,
        assetBrandList: repair.assetBrandList,        
        assetModelList:repair.assetModelList,
        assetCurrent: repair.assetCurrent,
        assetCurrentSize: repair.assetCurrentSize,
        assetTotal: repair.assetTotal,
        maskClosable: false,
        dispatch: dispatch,
        confirmLoading: loading,
        title: '新增明细',
        wrapClassName: 'vertical-center-modal',
        onCancel() {
            dispatch({
                type: 'repair/hideSecondModal',
            })
        },
    }
    const modalProps = {
        item: repair.currentItem,
        visible: modalVisible,
        type: modalType,
        maskClosable: false,
        assetList: assetList,
        id: repair.pullOffId,
        onAddDetail: onAddDetail,
        userList: repair.userList,
        assetType: repair.assetTypeTree,
        detailList: detailList,
        roomList: repair.roomList,
        assetBrandList: repair.assetBrandList,
        confirmLoading: loading,
        title: '新增维修单',
        dispatch:dispatch,
        wrapClassName: 'vertical-center-modal',
        newKey: repair.newKey,
        onOk(data) {
            dispatch({
                type: `repair/addRepair`,
                payload: data,
            })
        },
        onCancel() {
            dispatch({
                type: 'repair/hideModal',
            })
        },
        onCreateDetail(data) {
            dispatch({
                type: 'repair/showCreateDetailModal',
                payload: data,
            })
        },
        onEditRepairDetail(data) {
            dispatch({
                type: 'repair/qryAssetById',
                payload: data,
            })
        },
    }

    const doRepairModalProps = {
        item: repair.doRepairViewItem,
        visible: repair.doRepairModalVisible,
        maskClosable: false,
        viewDetailList: repair.viewDetailList,
        confirmLoading: loading,
        title: '确认维修',
        wrapClassName: 'vertical-center-modal',
        newKey: repair.newKey,
        dispatch: dispatch,
        onCancel() {
            dispatch({
                type: 'repair/hideDoRepairViewModal',
            })
        },
    }
    const repairRemarkViewModal = {
        item: repair.repairRemarkViewItem,
        visible: repair.repairRemarkModalVisible,
        maskClosable: false,
        confirmLoading: loading,
        title: '维修结果描述',
        wrapClassName: 'vertical-center-modal',
        newKey: repair.newKey,
        dispatch: dispatch,
        onCancel() {
            dispatch({
                type: 'repair/hideRepairRemarkViewModal',
            })
        },

        onRepairRemarkHandle(data) {
            for (var i = 0; i < repair.viewDetailList.length; i++) {
                if (data.detailId === repair.viewDetailList[i].id_) {
                    repair.viewDetailList[i].repairRemark = data.repairRemark;
                }
            }
            dispatch({
                type: 'repair/hideRepairRemarkViewModal',
                payload: repair.viewDetailList,
            })
        },
    }


    const loopRoom = data => data.map((item) => {
        return <Option key={item.id_ + ''}>{item.name}</Option>
    });

    return (
        <div style={{backgroundColor: '#fff' }}>
            <div style={{ minHeight: '100%' }}>
                <div style={{ width: '100%',backgroundColor: '#fff', lineHeight: '40px', paddingLeft: '20px', paddingTop: '10px' }}>
                    <Form layout="inline" >
                        <FormItem>
                            {
                                getFieldDecorator('roomId')(
                                    <Select
                                        showSearch
                                        style={{ width: 200 }}
                                        placeholder="选择机房"
                                        optionFilterProp="children"
                                    >   
                                    <Option value="">全部</Option>
                                        {loopRoom(repair.roomList)}

                                    </Select>
                                )
                            }
                        </FormItem>
                        <FormItem>
                            {getFieldDecorator('operatiorName')(
                                <Input type="text" placeholder="操作人" style={{ width: '130px' }} />
                            )}
                        </FormItem>
                        <FormItem>
                            {getFieldDecorator('executeTime')(
                                <RangePicker style={{ width: '250px' }} format="YYYY-MM-DD" />
                            )}
                        </FormItem>

                        <FormItem>
                            {getFieldDecorator('status')(
                                <Select
                                    showSearch
                                    style={{ width: 130 }}
                                    placeholder="选择状态"
                                    optionFilterProp="children"
                                >
                                    <Option value="">全部</Option>
                                    <Option value="1">未完成</Option>
                                    {/* <Option value="2">处理中</Option> */}
                                    <Option value="3">已完成</Option>
                                </Select>
                            )}
                        </FormItem>
                        <FormItem>
                            <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
                        </FormItem>
                        <FormItem>
                            <Button size="large" htmlType="reset" onClick={handleClear} >清空</Button>
                        </FormItem>

                        <div style={{ marginTop: '-40px', textAlign: 'right', paddingRight: '10px' }}>
                            <FormItem>
                                <Button type="primary" size='large' onClick={addHandler} >新增维修单</Button>
                            </FormItem>
                        </div>
                    </Form>
                </div>

                <div style={{ width: '100%', padding:"30px 20px",}}>
                    <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={repair.list} pagination={pagination}
                    />
                </div>
            </div>
            <AddRepairModal {...modalProps} />
            <SecondRepairModal {...repairModalProps} />
            <AddDetailModal {...addDetailModal} />
            <RepairViewModal {...viewModalProps} />
            <RepairRemarkViewModal {...repairRemarkViewModal} />
            <DoRepairViewModal {...doRepairModalProps} />
        </div>
    );
}

function mapStateToProps(state) {
    return { repair: state.repair, loading: state.loading.models.repair };
}

Repair = Form.create()(Repair);

export default connect(mapStateToProps)(Repair);
